<!--<template>-->
<!--  <div id="app">-->
<!--    <china-map-->
<!--      :key="key"-->
<!--      cascade-->
<!--      :echartsData="echartsData"-->
<!--      :scatterData="scatterData"-->
<!--      @mapClick="mapClick"-->
<!--    />-->
<!--  </div>-->
<!--</template>-->
<template>
  <div class="content">
    <china-map
      ref="chinaMapCp"
      :key="key"
      cascade
      :refreshFlag="refreshFlag"
      :echartsData="echartsData"
      :scatterData="scatterDataArr"
      @mapClick="mapClick"
      @getEchartsData="getEchartsData"
    />
  </div>
</template>

<script>
import chinaMap from "../echartsChinaMap/china优化版.vue";
import { getMapData} from "@/api/travel/scenery";

export default {
  name: "App",
  components: {
    chinaMap,
  },
  data() {
    return {
      key: 0,
      refreshFlag: false,
      testData: [{name: "上海市",value: 43214.85,}, {name: "天津市",value: 15695.05,}, {name: "浙江省", value: 73516,},
                 {name: "山东省",value: 83095.9,},  {name: "河北省",value: 40391.3,},  {name: "宁夏回族自治区",value: 4522.31,},
                 {name: "海南省",value: 6475.2,},   {name: "北京市",value: 40269.6,},  {name: "安徽省",value: 42959.2,},
                 {name: "青海省",value: 3346.63,},  {name: "重庆市",value: 27894.02,}, {name: "内蒙古自治区",value: 20514.2,},
                 {name: "湖南省",value: 46063.09,}, {name: "江苏省",value: 116364.2,}, {name: "新疆维吾尔自治区",value: 15983.65,},],
      scatterData: [
        // eg:{ name: '地点', value: [经度, 维度, 景点, 星级, 指数] },
        { name: "黑龙江", value: [128.03, 47.01, "漠河北极村", 5, 70] },
        { name: "西藏", value: [91.23, 29.5, '布达拉宫', 5, 80] },
        { name: '拉萨', value: [91.06, 29.8, '布达拉宫', 5, 80] },
        { name: '深圳', value: [114.02, 22.6, "世界之窗", 3, 38] },
        { name: '大连', value: [121.61, 38.91, "棒棰岛", 3, 38] },
        { name: "山东", value: [127.03, 47.01, "泰山", 5, 90] },
        { name: "青岛", value: [120.37, 36.09, "崂山", 4, 71] },
        { name: "即墨区", value: [120.45, 36.38, "测试", 2, 30] },
        { name: "平度市", value: [119.97, 36.77, "test", 2.1, 12.5] },
      ],
      scneryArr: [],
      scatterDataArr: [],
      echartsData:[],
    };
  },
  async created () {
    console.log('==>index created begin')

    this.getEchartsData()
    this.echartsData = this.testData.map(({name, value}) => {
      return {
        name: this.getCityName(name),
        value
      }
    })
    console.log('==>index created end')
  },
  methods: {
    mapClick({ code, name }) {
      console.log(code, name);
    },
    /**
     *@description 这个方法用来获取城市的简称，例如 北京市 => 北京。 内蒙古自治区 => 内蒙古
     */
    getCityName(cityName) {
      if (!cityName) return;
      let isAutonomy = cityName.search("自治区") != -1;
      if (isAutonomy) {
        return cityName.search("内") != -1
          ? cityName.substr(0, 3)
          : cityName.substr(0, 2);
      } else {
        return cityName.match(/(\S*)(省|市|特别行政区)/)
          ? cityName.match(/(\S*)(省|市|特别行政区)/)[1]
          : cityName;
      }
    },
    getEchartsData(){
      console.log('==>index getData begin')
      getMapData().then(
        response => {
          console.log(response)
          this.scatterDataArr = []
          this.scneryArr = response
          for (const idx in this.scneryArr) {
            let item = this.scneryArr[idx]
            let scatterData = {
              name : item.district,
              value : [item.longitude, item.latitude, item.name, item.star, item.score],
            }
            this.scatterDataArr.push(scatterData)
            console.log(this.scatterDataArr)
          }
          this.refreshFlag = true;
          console.log('==>index getData end')
        })
    }
  },
};
</script>
<style>
/*#app {*/
/*  background-color: #0f1e33;*/
/*}*/
</style>
